<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生连接客户端</title>
</head>
<body>
    <div style="height: 200px; width: 100%">
        <p>接收消息窗口</p>
        <textarea id="receive"  rows="10" cols="200"></textarea>
    </div>
    <div style="height: 200px; width: 100%">
        <p>发送消息窗口</p>
        <textarea id="message"  rows="10" cols="200"></textarea>
    </div>
<p>
    <button id="sendMessage">发送</button>
    <button id="closeConnect">断开连接</button>

</p>
</body>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    console.log($("#message"))
    // 方式1
    $(function(){
        var reconnect;
        var isConnect = false;
        var ws = new WebSocket("ws://39.101.165.76:8050/websocket");
        //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
        ws.onopen = function(){
            //当WebSocket创建成功时，触发onopen事件
            console.log("open");
            connect()
        }
        ws.readyState
        var connect = function () {
            var data = {
                "type":"101",
                "body":{
                    "token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJzY2hvb2xfYWRtaW4iLCJ0eXBlIjoxLCJjbGllbnRfaWQiOiJjbGllbnQtYXBwIiwic2NoSWQiOiJsenh4IiwiaGVhZFBpY3R1cmUiOiJodHRwOi8vbGtrLW9zcy5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vaXRlYWNoZWluZ19wYWFzL3BuZy8lRTUlOTElQTglRTYlQUMlQTIxNjE5NTc4MDI1MzAzaGVhZFBpY3R1cmUucG5nP0V4cGlyZXM9MTkzNDkzODAyOCZPU1NBY2Nlc3NLZXlJZD1MVEFJNEdEM3Q4S3VkbXR4TW52NGFCWWEmU2lnbmF0dXJlPTdYMnpad2tEdDZvOXU5OGs4ZEJMc3hjNUdEOCUzRCIsInNlbWVzdGVySWQiOjE2LCJyZWFsTmFtZSI6IuWRqOasoiIsInNjb3BlIjpbImFsbCJdLCJzY2hvb2xJZCI6MSwiaWQiOjEwMDAzMzcsImV4cCI6MTYyMDc5MDU4MiwiaWRQaG90byI6bnVsbCwianRpIjoiNGZmZjdiZDEtODMyMi00ZWExLTgyZDEtYTZiMTMzZTM3NzdiIn0.EdEp7oJTn5XLFFvQazyqaQQa4QzC51m7PsqGbnzCa9MiOiBVhvotVsnzulKBbXR7aXPnzEp_za5eq9p43g_1HALXqgpHnhxAz7O4GW17e4Zat__IEy1SYl8_CVjIHGi62Fb3I_CqKf-4dVdrolIBLWYaplB_gvM3NL3Z4wx6W8uYfsdjjRVPL30DEF13YXEQ8p0HRTVUUErlwsWX0PZaqxEVLqH36rVlWsZa1ecmrjOJlZmEOjIXgyFzk6Gq4V7sRv0mB4YMSauMKj-r0ajGF7MZrB3SutF41QtpWjAEKKIFg8h3Nj_6bQng6oeRFgkOWSMDZ-afYu-Ml7C1RxdHLQ",
                    "deviceCode":"324324"
                }
            }
            ws.send(JSON.stringify(data)); //将消息发送到服务端
        }

        ws.onmessage = function(e){
            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            console.log(e.data);
            let message = JSON.parse(e.data)
            if (message.type == 101) {
                setInterval(function () {
                    ws.send('{"type":"100"}')
                }, 5000)
            }
            if (message.type !== 100) $('#receive').val($('#receive').val() + "\r\n" + e.data)
        }
        ws.onclose = function(e){
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log("close");
            isConnect = false;
            reconnect = setInterval(function () {
                console.log("开始重新连接...")
                if (isConnect) {
                    reconnect.clear()
                }
            }, 5000);
        }
        ws.onerror = function(e){
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log(e);
        }

        $('#sendMessage').click(function () {
            var text = $('#message').val();
            console.log('发送消息: ' + text)
            ws.send(text)
            $('#message').val('');
        })

        $('#closeConnect').click(function () {
            ws.close();
        })
    });
</script>
</html>
